<template>
  <div>
    <div class="payment">
      <div class="payment_top">
        <div class="top_left">
          <img src="../../../public/left.gif" alt="" @click="handleClick()" />
        </div>
        <div class="top_title">支付</div>
      </div>
      <div class="payment_conter">
        <div class="conter_top">运费金额</div>
        <div class="conter_bottom">
          ￥<input
            type="text"
            class="bottom_inp"
            placeholder="0.00"
            v-model="freight"
            @click="hancleOpenkeyboard()"
          />
        </div>
      </div>
      <div>
        <van-number-keyboard
          :show="show"
          theme="custom"
          extra-key="."
          close-button-text="完成"
          @blur="show = false"
          @input="onInput"
          @delete="onDelete"
          @hide="onGo()"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      freight: "", //运费
      show: false, //数字键盘显示隐藏
    };
  },
  methods: {
    handleClick() {
      //返回上一页
      this.$router.go(-1);
    },
    onInput(value) {
      //数字键盘事件
      if (this.freight * 1 > 1000) {
        console.log("单笔金额不能超过10000元");
      } else {
        this.freight += value;
      }
    },
    onDelete() {
      //  删除事件
      this.freight = this.freight.substring(0, this.freight.length - 1);
    },
    onGo() {
      const num = this.freight;
      this.$router.push({ path: "/paymentway", query: { num: num * 1 } });
    },
    hancleOpenkeyboard() {
      if (this.show == false) {
        this.show = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.payment {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
}
.payment_top {
  width: 100%;
  height: 50px;
  position: relative;
  background: #4483ec;
  box-shadow: 0px 0px 10px #000;
}
.top_title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
.payment_conter {
  width: 100%;
  height: 140px;
  position: relative;
  margin-top: 20px;
  background: #fff;
}
.conter_top {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  margin-left: 40px;
}
.conter_bottom {
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 26px;
  margin-left: 40px;
}
.bottom_inp {
  width: 50%;
  height: 60px;
  font-size: 30px;
  border: 0px;
}
</style>